<template>
  <div class="flow-sty">
    <div class="list-sty" v-for="(item, index) in imgList" :key="item.id">
      <div class="flow-info">
        <div class="flow-list">
          <span class="flow-img"><img :src="item.imgUrl" class="img" alt=""></span>
          <div class="ff-bold" :class="item.currentText ? 'current-text' : (item.dashed ? 'img-text' : 'dashed-text')">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div :class="item.dashed ? 'line-sty' : 'line-dashed'" v-if="index < imgList.length - 1">
        <img src="@/assets/images/icons/icon_transport_line.png" />
      </div>
    </div>
  </div>
</template>
<script>

export default {
  props: ['imgList'],
  data() {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
.flow-sty {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 8px 8px;
  padding: 24px 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #F1F1F1;

  .list-sty {
    display: flex;
    width: 25%;

    .flow-info {
      flex: 1;
    }

    .flow-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;

      .flow-img {
        width: 32px;
        height: 32px;
        display: block;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      .img-text {
        font-size: 13px;
        color: #1E1714;
        line-height: 21px;
      }

      .current-text {
        font-size: 13px;
        color: #FF186B;
        line-height: 32px;
      }

      .dashed-text {
        font-size: 13px;
        color: #AEB0B9;
        line-height: 21px;
      }
    }
  }

  // .line-sty {
  //   width: 130px;
  //   height: 4px;
  //   background: #333333;
  //   border-radius: 28px;
  //   margin-top: 38px;
  // }

  // .line-dashed {
  //   width: 130px;
  //   height: 4px;
  //   border-bottom: 4px dashed #D9D9D9;
  //   margin-top: 38px;
  // }
}
</style>
